// app/cart/page.tsx
'use client'

import Image from "next/image"
import { ResponsiveLayout } from "@/components/layout/responsive-layout"
import { Button } from "@/components/ui/button"
import { Minus, Plus } from 'lucide-react'
import { useShopping } from '../contexts/ShoppingContext' // 调整导入路径
import { useState } from 'react'

export default function CartPage() {
  const { cart, updateQuantity, removeFromCart, checkout } = useShopping()
  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false)

  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0)

  const handleCheckout = () => {
    setIsCheckoutOpen(true) // 打开确认弹窗
  }

  const confirmCheckout = () => {
    checkout() // 执行结算
    setIsCheckoutOpen(false) // 关闭弹窗
  }

  const cancelCheckout = () => {
    setIsCheckoutOpen(false) // 关闭弹窗
  }

  return (
    <ResponsiveLayout>
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 className="text-2xl font-bold mb-6 text-amber-800">购物车</h1>

        {cart.length === 0 ? (
          <p className="text-gray-600">您的购物车是空的。</p> //提示用户购物车为空
        ) : (
          <>
            <div className="space-y-4 mb-8">
              {cart.map((item) => (
                <div key={item.id} className="flex gap-4 rounded-xl border bg-white p-4 shadow-sm transition-all duration-300 hover:shadow-md">
                  <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
                    <Image
                      src={item.image}
                      alt={item.name}
                      width={100}
                      height={100}
                      className="h-full w-full object-cover transition-transform duration-300 hover:scale-110"
                    />
                  </div>

                  <div className="flex flex-1 flex-col">
                    <h3 className="font-medium text-amber-800">{item.name}</h3>
                    <p className="text-sm text-gray-500">
                      {/* 如果有 size 和 color 属性，请取消注释并使用 */}
                      {/* {item.size ? `${item.size} · ` : ''}{item.color ? item.color : ''} */}
                    </p>
                    <div className="mt-auto flex items-center justify-between">
                      <p className="text-lg font-bold text-amber-600">¥{item.price}</p>
                      <div className="flex items-center gap-3">
                        <Button
                          size="icon"
                          variant="outline"
                          className="hover:bg-amber-50 transition-colors duration-300"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                          disabled={item.quantity <= 1}
                        >
                          <Minus className="h-4 w-4" />
                        </Button>
                        <span>{item.quantity}</span>
                        <Button
                          size="icon"
                          variant="outline"
                          className="hover:bg-amber-50 transition-colors duration-300"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                        <Button
                          size="icon"
                          variant="ghost"
                          className="text-red-500 hover:bg-red-100 transition-colors duration-300"
                          onClick={() => removeFromCart(item.id)}
                        >
                          移除
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="border-t pt-4">
              <div className="mb-4 flex items-center justify-between">
                <span className="text-gray-600">共计: {cart.reduce((sum, item) => sum + item.quantity, 0)}件</span>
                <span className="text-xl font-bold text-amber-600">合计: ¥{total}</span>
              </div>
              <Button
                className="w-full bg-amber-500 hover:bg-amber-600 text-white transition-colors duration-300"
                onClick={handleCheckout}
              >
                结算
              </Button>
            </div>
          </>
        )}

        {/* 确认结算弹窗 */}
        {isCheckoutOpen && (
          <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
            <div className="bg-white rounded-lg p-6 w-80">
              <h2 className="text-xl font-semibold mb-4">确认结算</h2>
              <p>您确定要结算吗？</p>
              <div className="mt-6 flex justify-end gap-4">
                <Button variant="outline" onClick={cancelCheckout}>取消</Button>
                <Button onClick={confirmCheckout} className="bg-amber-500 hover:bg-amber-600 text-white">确认</Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </ResponsiveLayout>
  )
}
